<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单的内容限制（姓名，邮箱，电话等）</title>
<style type="text/css">
	ul li{ margin:10px auto; list-style:none; }
	input{ width:500px; height:40px; }

</style>
<script type="text/javascript">
	//邮箱验证
	function chkEmail(){
		var email=document.getElementById("email").value;
		var obj=document.getElementById("showMess1");
		var patternEmail=/^\w+[@]\w+[.][\w.]+$/;
		if(patternEmail.test(email)){
			obj.innerText="正确";
			obj.style.color="green";
		}else{
			obj.innerText="错误";
			obj.style.color="red";
			return false;
		}
	}
	//邮编验证
	function chkPostalcode(){
		var postalcode=document.getElementById("postalcode").value;
		var obj=document.getElementById("showMess2");
		var patternPostalcode=/^\d{6}$/;
		if(patternPostalcode.test(postalcode)){
			obj.innerText="正确";
			obj.style.color="green";
		}else{
			obj.innerText="错误";
			obj.style.color="red";
			return false;
		}
	}
	//身份证验证
	function chkIdCard(){
		var idCard=document.getElementById("idCard").value;
		var obj=document.getElementById("showMess3");
		var patternIdCard=/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/;
		if(patternIdCard.test(idCard)){
			obj.innerText="正确";
			obj.style.color="green";
		}else{
			obj.innerText="错误";
			obj.style.color="red";
			return false;
		}
	}
	//手机验证(----/^((1[3|5|8][0-9])|(14[5|7])|(17[0|1|3|6|7|8]))\d{8}$/-----)
	function chkPhone(){
		var phone=document.getElementById("phone").value;
		var obj=document.getElementById("showMess4");
		var patternPhone=/^1[3|4|5|7|8][0-9]\d{8}$/;
		if(patternPhone.test(phone)){
			obj.innerText="正确";
			obj.style.color="green";
		}else{
			obj.innerText="错误";
			obj.style.color="red";
			return false;
		}
	}
	
</script>
</head>

<body>
	<div>
    	<form action="">
        	<ul>
        	  <li><label for="email">邮箱：</label><input type="text" id="email" onBlur="chkEmail()"/><span id="showMess1"></span></li>
              <li><label for="postalcode">邮编：</label><input type="text" id="postalcode" maxlength="6" onBlur="chkPostalcode()"/><span id="showMess2"></span></li>
              <li><label for="idCard">身份证号码：</label><input type="text" id="idCard" maxlength="18" onBlur="chkIdCard()"/><span id="showMess3"></span></li>
              <li><label for="phone">手机号码：</label><input type="text" id="phone" maxlength="11" onBlur="chkPhone()"/><span id="showMess4"></span></li>
              
        	</ul>
        </form>
    </div>

</body>
</html>
